<template>
	<view>
		<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#fb5f46"
			:extra-icon="{ name: 'arrow-down-fill', color: '#666', size: '26rpx' }" :extra-active-icon="{
        name: 'arrow-up-fill',
        color: '#fb5f46',
        size: '26rpx',
      }" :defaultValue="defaultValue" :custom-style="{ padding: '0 30rpx' }" @click="selectMenu">
			<uv-drop-down-item v-if="result.length > 0 " v-for="(item, index) in resultMenu" :key="index" type="2"
				:name="item.name" :label="dropItem(item.name).label" :value="dropItem(item.name).value">
			</uv-drop-down-item>
			<slot></slot>
		</uv-drop-down>
		<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" :currentDropItem="currentDropItem"
			@clickItem="clickItem" @popupChange="change"></uv-drop-down-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			defaultValue: {
				type: Array,
				default: () => [0, "all", "0"],
			},
			resultMenu: {
				type: Array,
				default: () => [],
			},
			order: {
				type: Object,
				default: () => {},
			},
		},
		data() {
			return {
				activeName: "order", // 默认activeName值
				result: [], // 确保 result 是一个数组
			}
		},
		mounted() {
			this.result = this.resultMenu;
			if (this.result.length > 0) {
				this.activeName = this.result[0].name;
			}
		},
		computed: {
			currentDropItem() {
				return this.order[this.activeName];
			},
		},
		methods: {
			// 获取下拉框项的label和value
			dropItem(name) {
				const find = this.result.find((item) => item.name === name);
				if (find != undefined) {
					return {
						label: find.label,
						value: find.value,
					}
				} else {
					return {
						label: this.order[name].label,
						value: this.order[name].value,
					}
				}
			},

			// 选择菜单回调
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				this.activeName = name;
				// 确保 this.order[this.activeName] 是有效的对象
				const activeItem = this.order[this.activeName];
				if (activeItem && Array.isArray(activeItem.child)) {
					const find = this.result.find((item) => item.name == this.activeName);
					if (find) {
						const findIndex = activeItem.child.findIndex(
							(item) => item.label == find.label && item.value == find.value
						);
						activeItem.activeIndex = findIndex;
					} else {
						activeItem.activeIndex = 0;
					}
				} else {
					// 处理 activeItem 或 child 不存在的情况
					console.warn(`${this.activeName} 数据不存在或未正确初始化`);
				}
			},
			// 处理弹窗打开状态变化
			change(e) {
				console.log("弹窗打开状态：", e);
			},
			// 点击下拉框项回调
			clickItem(e) {
				let {
					label,
					value
				} = e;
				const findIndex = this.result.findIndex(
					(item) => item.name == this.activeName
				);

				if (
					this.defaultValue.indexOf(value) > -1 &&
					this.order[this.activeName].label
				) {
					label = this.order[this.activeName].label;
				}

				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value,
					});
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value,
					});
				}

				// 去除默认值
				this.result = this.result.filter(
					(item) => this.defaultValue.indexOf(item.value) == -1
				);
				uni.showModal({
					content: `筛选的值：${JSON.stringify(this.result)}`,
				});
			},
		},
	};
</script>
<style scoped lang="scss">
	::v-deep .uv-drop-down {
		display: flex;
		justify-content: space-around;
	}

	::v-deep .uv-drop-down-item {
		justify-content: space-around;

		.uv-text {
			flex: none;
			width: auto;
		}
	}

	::v-deep .uv-drop-down {
		border-bottom: none;
	}
</style>